import React, { useRef, useEffect } from 'react';
import './index.scss';

export default function XueHua1() {
  const dom = useRef(null);

  const drawBall = (res) => {
    const canvas = res; // 画布节点
    const ctx = canvas.getContext('2d'); // 上下文
    const Cwidth = res.clientWidth; // 画布宽度
    const Cheight = res.clientHeight; // 画布高度
    const minNum = 2; //最小光点直径
    const maxNum = 4; //最大光点直径
    const particles = 10; //光点数量
    const colors = ['255, 255, 255']; //光点中间的颜色注意和晕开颜色顺序配对
    const GradientColors = ['127,123,123']; //光点晕开的颜色色注意和中间颜色顺序配对
    const rand = function rand(a, b) {
      return Math.random() * (b - a) + a;
    };
    const dpr = 1; //设备像素比
    canvas.width = Cwidth;
    canvas.height = Cheight * dpr;
    ctx.scale(dpr, dpr);
    const Particle = (function () {
      function Particle() {
        this.reset();
      }
      Particle.prototype.reset = function () {
        const colorSel = Math.random();
        this.color = colors[~~(colorSel * colors.length)];
        this.GradientColors =
          GradientColors[~~(colorSel * GradientColors.length)];
        this.radius = rand(minNum, maxNum);
        this.x = rand(0, canvas.width);
        this.y = rand(60, canvas.height);
        this.vx = -5 + Math.random() * 10;
        this.vy = (Math.random() - 0.5) * this.radius;
        this.valpha = rand(0.02, 0.09);
        this.opacity = 0;
        this.life = 0;
        this.onupdate = undefined;
        this.type = 'dust';
      };
      Particle.prototype.update = function () {
        this.x = this.x + this.vx / 6;
        this.y = this.y + this.vy / 6;

        if (this.opacity >= 1 && this.valpha > 0) this.valpha *= -1;
        this.opacity += this.valpha / 8;
        this.life += this.valpha / 8;
        if (this.life < 0 || this.radius <= 0 || this.y > canvas.height) {
          this.onupdate = undefined;
          this.reset();
        }
      };
      Particle.prototype.draw = function (c) {
        const grd = c.createRadialGradient(
          this.x,
          this.y,
          0,
          this.x,
          this.y,
          this.radius * 4
        );
        grd.addColorStop(
          0,
          'rgba(' +
            this.GradientColors +
            ', ' +
            Math.min(this.opacity - 0.2, 0.65) +
            ')'
        );
        grd.addColorStop(1, 'rgba(' + this.GradientColors + `,0)`);
        c.fillStyle = grd;

        c.beginPath();
        c.arc(this.x, this.y, this.radius * 4, 2 * Math.PI, false);
        c.fill();

        c.strokeStyle =
          'rgba(' + this.color + ', ' + Math.min(this.opacity, 0.85) + ')';
        c.fillStyle =
          'rgba(' + this.color + ', ' + Math.min(this.opacity, 0.65) + ')';
        c.beginPath();
        c.arc(this.x, this.y, this.radius, 2 * Math.PI, false);
        c.fill();
      };
      return Particle;
    })();
    const drawables = (function () {
      let _results;
      _results = [];
      for (let i = 1; i <= particles; i++) {
        _results.push(new Particle());
      }
      return _results;
    })();
    function draw() {
      window.requestAnimationFrame(draw);
      let d, _i, _len;
      canvas.width = Cwidth;
      canvas.height = Cheight;
      ctx.clearRect(0, 0, Cwidth, Cheight);

      for (_i = 0, _len = drawables.length; _i < _len; _i++) {
        d = drawables[_i];
        d.draw(ctx);
      }
    }

    function update() {
      window.requestAnimationFrame(update);
      let d, _i, _len, _results;
      _results = [];
      for (_i = 0, _len = drawables.length; _i < _len; _i++) {
        d = drawables[_i];
        _results.push(d.update());
      }
      return _results;
    }
    window.requestAnimationFrame(draw);
    window.requestAnimationFrame(update);
  };
  useEffect(() => {
    const canvas = dom.current;
    drawBall(canvas);
  });
  return (
    <div className="content">
      <canvas ref={dom} />
    </div>
  );
}
